<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<title>兑换记录</title>
<base href="<%=basePath%>" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="i/buyu.ico">
<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="layui/css/layui.css" media="all" />
<style type="text/css">
.waterTable tr td {
	background: #f3f4f6;
}

.water-field {
	font-size: 16px;
	font-weight: bold;
}

.info-field {
	border-bottom: 0;
}

.edit-field {
	display: none;
}

.tpl-block {
	font-size: 14px;
}

.layui-form-label {
	width: 120px;
}

.layui-input-block {
	margin-left: 130px;
	min-height: 36px
}
</style>
</head>
<body>
<br/>
	<div class="tpl-page-container tpl-page-header-fixed">
		<div class="tpl-portlet-components  am-center">
			<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form class="layui-form" action="" onsubmit='return false'>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input type="text" name="OrderID"  id="OrderID" placeholder="请输入订单号" autocomplete="off"
										class="layui-input">
								</div>
								<div class="layui-input-inline">
									<input type="text" name="UserId"  id="UserId" placeholder="请输入玩家ID" autocomplete="off"
										class="layui-input">
								</div>
								<div class="layui-input-inline">
									<input type="text" name="GoodsId"  id="GoodsId" placeholder="实物物品ID" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							
                                        
                                         <div class="layui-inline">
							              <div class="layui-input-inline">
							              <select name="Statesend" id="Statesend" placeholder="全部状态" lay-filter="Statesend">
								              <option value="0">全部状态</option>
								              <option value="1">未发货状态</option>
								              <option value="2">已发货状态</option>
								              <option value="3">已拒绝状态</option>
							              </select>
							              </div>
                                        </div>
                                        
                                        <!-- 日期选择 -->
                                      <div class="layui-inline" >
                                        <div class="layui-input-inline">
                                          <input type="text" class="layui-input" id="startRedeemTime" placeholder="开始兑换时间"  lay-filter="startRedeemTime" name="startRedeemTime" autocomplete="off">
                                        </div>
                                      </div>
                                      <div class="layui-inline">
                                        <div class="layui-input-inline">
                                          <input type="text" class="layui-input" id="endRedeemTime" placeholder="结束兑换时间"  lay-filter="endRedeemTime" name="endRedeemTime" autocomplete="off">
                                        </div>
                                      </div>
                                      <div class="layui-inline">
                                        <div class="layui-input-inline">
                                          <input type="text" class="layui-input" id="startHandleTime" placeholder="开始处理时间"  lay-filter="startHandleTime" name="startHandleTime"autocomplete="off">
                                        </div>
                                      </div>
                                      <div class="layui-inline">
                                        <div class="layui-input-inline">
                                          <input type="text" class="layui-input" id="endHandleTime" placeholder="结束处理时间"  lay-filter="endHandleTime" name="endHandleTime" autocomplete="off">
                                        </div>
                                      </div>
							<div class="layui-inline">
								<div class="layui-input-inline">
									<button class="layui-btn layui-btn-normal"  data-type="reload" id="selectbyCondition" onsubmit="return false;">搜索</button>
									<!-- lay-filter类似于选择器(事件过滤器) -->
									<button type="reset" class="layui-btn layui-btn-primary">重置</button>
								</div>
							</div>
						</div>
					</form>
			<hr>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-skin="nob" id="userTable" lay-filter="userTable"></table>
					</div>
				</div>
			</div>

	<script src="js/jquery.min.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
    
    <script type="text/html" id="tool">
            {{#  if(d.State == 0){ }}
                 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit1">未发货</a>
              {{#  } else if(d.State == 1){ }}
                 <a class="layui-btn layui-btn-xs" lay-event="edit2">已发货</a>
              {{#  } else if(d.State == 2){ }}
                 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit3">拒绝发货</a>
              {{#  } }}
    </script>
    
	<script>
		layui.use([ 'table', 'form', 'layer', 'laydate'], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
            var laydate = layui.laydate;
			
            layer.config({
				extend: 'MySkin/style.css'
			});
            
			table.render({
				elem : '#userTable',
				url : 'exchange/list',
				method : 'post',
				title : '兑换记录表',
				totalRow : true,
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				id:'allAttTable',
				request:{
					pageName:'PageIndex',
					limitName:'PageCount'
				},
				where:{
					OrderID : $('#OrderID').val(),
					UserId : $('#UserId').val(),
					GoodsId : $('#GoodsId').val(),
					Statesend : $('#Statesend').val(),
					startRedeemTime : $('#startRedeemTime').val(),
					endRedeemTime : $('#endRedeemTime').val(),
					startHandleTime : $('#startHandleTime').val(),
					endHandleTime : $('#endHandleTime').val()
				}
				,
				cols : [ [ 
					{
					field : 'OrderId',title : '订单号'}, 
					{field : 'Nickname',title : '玩家昵称名'}, 
					{field : 'UserId',title : 'ID'}, 
					{field : 'VipLevel',title : 'VIP'}, 
					{field : 'TotalRecharge',title : '充值额度(元)'}, 
					{field : 'GoodsId',title : '兑换物品ID'}, 
					{field : 'GoodsName',title : '兑换物品'}, 
					{field : 'CreateTime',title : '兑换时间'}, 
					{field : 'ProcessTime',title : '发货时间'}, 
					{field : 'RealName',title : '真实姓名'}, 
					{field : 'Phone',title : '电话'}, 
					{field : 'Address',title : '地址'}, 
					{field : 'State',title : '状态',hide:true}, 
					{title : '操作',fixed : 'right',align : 'center',toolbar:'#tool'} 
				] ],
				page : true,//分页
				response : {
					statusCode : 200
				//重新规定成功的状态码为 200，table 组件默认为 0
				},
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					return {
						"code" : res.status, //解析接口状态
						"msg" : res.message, //解析提示文本
						"count" : res.count, //解析数据长度
						"data" : res.data
					//解析数据列表
					};
				}
			});

			
			
			 //根据条件查询表格数据重新加载
			  var active = {
				    reload: function(){
				    //获取用户名
				      //执行重载
				      table.reload('allAttTable', {
				        page: {
				          curr: 1 //重新从第 1 页开始
				      }
				      //根据条件查询
				        ,where: {
				        	OrderID : $('#OrderID').val(),
							UserId : $('#UserId').val(),
							GoodsId : $('#GoodsId').val(),
							Statesend : $('#Statesend').val(),
							startRedeemTime : $('#startRedeemTime').val(),
							endRedeemTime : $('#endRedeemTime').val(),
							startHandleTime : $('#startHandleTime').val(),
							endHandleTime : $('#endHandleTime').val()
				        }
				      });
				    return false;
				   }
				};
			  //点击搜索按钮根据用户名称查询
			  $('#selectbyCondition').on('click',
		          function(){
		              var type = $(this).data('type');
		              active[type] ? active[type].call(this) : '';
		          });
			  
			  
			  setInterval(function(){
				  table.reload('allAttTable', {
				        page: {
				          curr: 1 //重新从第 1 页开始
				      }
				      //根据条件查询
				        ,where: {
				        	OrderID : $('#OrderID').val(),
							UserId : $('#UserId').val(),
							GoodsId : $('#GoodsId').val(),
							Statesend : $('#Statesend').val(),
							startRedeemTime : $('#startRedeemTime').val(),
							endRedeemTime : $('#endRedeemTime').val(),
							startHandleTime : $('#startHandleTime').val(),
							endHandleTime : $('#endHandleTime').val()
				        }
				      });
		          },60000);
			  
			//监听行工具事件
			  table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			    var data = obj.data //获得当前行数据
			    ,layEvent = obj.event; //获得 lay-event 对应的值
			    if(layEvent === 'edit1'){
			        var id = data.UserId;
					var name = data.Nickname;
					var OrderId = data.OrderId;
					var index = layer.open({
						type: 2,
						shadeClose: true,
						shade: 0.5,
						area: ['1500px', '800px'],
						title: '锁定玩家',
						skin: 'layer-ext-yourskin',
						content: '<%=basePath%>redeemCode/detail/select',
						success: function(layero, index) {
							var body = layer.getChildFrame("body", index);
							// 取到弹出层里的元素，并把编辑的内容放进去
							body.find(".zid").val(id); //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
							body.find(".zname").val(name);
							body.find(".zorderid").val(OrderId);
						}
					});
			    }else if(layEvent == 'edit2'){
			    }else if(layEvent == 'edit3'){
			    }
			  });
			  
				//日期选择器
				laydate.render({
				    elem: '#startRedeemTime'
				    ,type: 'datetime' 
				  });
				laydate.render({
					elem: '#endRedeemTime'
					,type: 'datetime' 
				});
				laydate.render({
				    elem: '#startHandleTime'
				    ,type: 'datetime' 
				  });
				laydate.render({
					elem: '#endHandleTime'
					,type: 'datetime' 
				});
		});
	</script>
	<!-- 采用了layui.laytpl模板引擎 -->
</body>

</html>